<template>
	<div class="custom-form">
		<el-row :gutter="15">
			<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" :key="showFormKey"
				v-if="showForm">
				<el-col :span="12" v-show="hasFormPermission('part')">
					<el-form-item :label="$t('楼栋楼层')" prop="part">
						<xjr-cascader v-model="formData['part']" :disabled="hasDisabledPermission('part',false)"
							:settings="partsettings" :style="{width: '100%'}" placeholder="请选择楼栋楼层" separator="/"
							:checkStrictly="false" filterable clearable v-if="showForm"></xjr-cascader>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-show="hasFormPermission('room_number')">
					<el-form-item :label="$t('房号')" prop="room_number">
						<el-input v-model="formData['room_number']" placeholder="请输入房号"
							:disabled="hasDisabledPermission('room_number',false)"
							:readonly="!hasEditPermission('room_number',false)" clearable :style="{width: '100%'}">
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-show="hasFormPermission('room_type')">
					<el-form-item :label="$t('房型')" prop="room_type">
						<el-select v-model="formData['room_type']" placeholder="请选择房型" @change="changeValue($event)"
							:disabled="hasDisabledPermission('room_type',false)" filterable clearable
							:style="{width: '100%'}">
							<el-option v-for="(item, index) in room_typeOptions" :key="index" :label="item.F_ItemName"
								:value="item.F_ItemValue" :disabled="item.disabled"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-show="hasFormPermission('bed_number')">
					<el-form-item :label="$t('床位数')" prop="bed_number">
						<el-input v-model="formData['bed_number']" placeholder="请输入床位数"
							:disabled="hasDisabledPermission('bed_number',false)"
							:readonly="!hasEditPermission('bed_number',true)" :style="{width: '100%'}"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-show="hasFormPermission('used_bed_number')">
					<el-form-item :label="$t('已分配人数')" prop="used_bed_number">
						<el-input v-model="formData['used_bed_number']" placeholder="请输入已分配人数"
							:disabled="hasDisabledPermission('used_bed_number',false)"
							:readonly="!hasEditPermission('used_bed_number',true)" :style="{width: '100%'}"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-show="hasFormPermission('energy_meter_number')">
					<el-form-item :label="$t('电表编号')" prop="energy_meter_number">
						<el-input v-model="formData['energy_meter_number']" placeholder="请输入电表编号"
							:disabled="hasDisabledPermission('energy_meter_number',false)"
							:readonly="!hasEditPermission('energy_meter_number',false)" clearable
							:style="{width: '100%'}"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-show="hasFormPermission('cold_water_meter_number')">
					<el-form-item :label="$t('冷水表编号')" prop="cold_water_meter_number">
						<el-input v-model="formData['cold_water_meter_number']" placeholder="请输入冷水表编号"
							:disabled="hasDisabledPermission('cold_water_meter_number',false)"
							:readonly="!hasEditPermission('cold_water_meter_number',false)" clearable
							:style="{width: '100%'}"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-show="hasFormPermission('hot_water_meter_number')">
					<el-form-item :label="$t('热水表编号')" prop="hot_water_meter_number">
						<el-input v-model="formData['hot_water_meter_number']" placeholder="请输入热水表编号"
							:disabled="hasDisabledPermission('hot_water_meter_number',false)"
							:readonly="!hasEditPermission('hot_water_meter_number',false)" clearable
							:style="{width: '100%'}"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-show="hasFormPermission('status')">
					<el-form-item :label="$t('是否启用')" prop="status">
						<el-switch v-model="formData['status']" :disabled="hasDisabledPermission('status',false)"
							:readonly="!hasEditPermission('status',undefined)" :active-value="'1'"
							:inactive-value="'0'">
						</el-switch>
					</el-form-item>
				</el-col>
				<el-col :span="24" v-if="!isWorkflowForm">
					<el-form-item size="large" v-if="isEdit" class="form-button-center">
						<el-button type="primary" @click="submitForm" :loading="submitLoading">
							{{submitLoading?$t('workFlow.WFMenu.hintSubmit'):$t('submit')}}
						</el-button>
						<el-button @click="cancelForm">{{$t('cancelText')}}</el-button>
					</el-form-item>
				</el-col>
			</el-form>
		</el-row>
	</div>
</template>
<script>
	import workflowFormAuthorize from "@/mixins/workflowFormAuthorize";
	import authorizeMixin from "@/mixins/authorize";
	import nodeMsgMixin from "@/mixins/nodeMsg";
	import {
		baseUrl
	} from "@/config/env";
	import request from "@/router/axios";
	import {
		fieldsConfig,
		formFieldsMap,
		getHideComponents
	} from './dormitory_roomConfig';
	import {
		formValidateNotice
	} from '@/util/util';
	import store from "@/store";
	import hideComponentsMixin from "@/mixins/hideComponents"; // 隐藏组件
	export default {
		mixins: [authorizeMixin, workflowFormAuthorize, nodeMsgMixin, hideComponentsMixin],

		components: {},
		props: ['keyValue', 'isEdit', 'disabled'],
		data() {
			return {
				userInfo: {},
				submitLoading: false,
				showForm: true,
				showFormKey: 1,
				reRenderSubform: false,
				operationVal: 'add',
				isAdd: true,
				listData: [],
				addressUrl: 'dormitory_room',
				autoCompleteConfEventData: [],
				mainTableName: 't_dormitory_room',
				formConfig: {},
				formFieldsMap: new Map(),
				hideComponentsMap: new Map(),
				needShowValueTags: ['asso-popup', 'mutiple-popup'],
				formData: {
					'part': localStorage.getItem("part1") + "," + localStorage.getItem("floor1"),
					'room_number': '',
					'room_type': '',
					'bed_number': 1,
					'used_bed_number': 0,
					'energy_meter_number': '',
					'cold_water_meter_number': '',
					'hot_water_meter_number': '',
					'status': 1,
				},
				rules: {
					part: [{
						required: true,
						// type: 'array',
						message: '请至少选择一个楼栋楼层',
						trigger: 'change'
					}],
					room_number: [{
						required: true,
						message: '请输入房号',
						trigger: 'blur'
					}],
					room_type: [{
						required: true,
						message: '请选择房型',
						trigger: 'change'
					}],
					bed_number: [],
					used_bed_number: [],
					energy_meter_number: [],
					cold_water_meter_number: [],
					hot_water_meter_number: [],

				},
				room_typeOptions: [],

				partsettings: [{
					"level": 0,
					"name": "1",
					"dataSource": "cdffa8367d945231b4149ab50d83f575",
					"showField": "name",
					"saveField": "code"
				}, {
					"level": 1,
					"name": "2",
					"dataSource": "681dd441c8918e96b85345a4575ce7ea",
					"showField": "name",
					"saveField": "code",
					"parentId": "parent_code"
				}],
			}
		},
		computed: {},
		watch: {},
		async created() {
			this.formConfig = this.getFormConfig();
			this.formFieldsMap = this.getFormFieldsMap();
			this.userInfo = localStorage.getItem("avue-userInfo") ? JSON.parse(localStorage.getItem(
				"avue-userInfo")).content : {};
		},
		async mounted() {
			this.hideComponentsMap = await this.getHideComponentsMap();
			this.showForm = false;
			await this.insertCreatedEvent();
			//TODO   再这里做数据回填 请求表单数据

			if (this.keyValue) {
				this.isAdd = false;
			}
			if (!this.isAdd && this.keyValue) {
				this.operationVal = 'edit';
				try {
					let res = await request({
						url: baseUrl + "/" + this.addressUrl + "/" + this.keyValue,
						method: "get",
					});

					this.formData = res.data.data

					if (res.data.data.part) {
						this.formData.part = res.data.data.part.split(',')
					} else {
						this.formData.part = [];
					}

					await this.handleEdit();
					this.showFormKey++;
				} catch (error) {}
			}


			if (typeof this.getField103Options == "function") {
				await this.getField103Options();
			}
			await this.insertMountedEvent();
			this.reRenderSubform = true; //子表单显示
			this.showFormKey++;
			this.processParameterAssignment();
			this.showForm = true;
		},
		methods: {
			getFormData() {
				let key = this.mainTableName + 'Entity';
				let returnParams = {};

				returnParams[key] = this.formData;
				return {
					...returnParams,
				};
			},

			validateForm() {
				this.$refs['elForm'].validate(valid => {});
			},
			changeValue(e) {
				// console.log(localStorage.getItem("part1","floor1"))
				let room_type1 = []
				this.room_type1 = this.room_typeOptions[e - 1].F_ItemName
				if (this.room_type1 === "双人间"|| this.room_type1 ==="接待房") {
					this.formData.bed_number = 2
				} else {
					this.formData.bed_number = 1
				}
			},
			async aysncValidateForm() {
				let validataArry = []
				let formValidateNotice = function formValidateNotice(obj, that, formAuth) {
					for (var o in obj) {
						if (!formAuth[o] && obj[o][0]) {
							that.$message({
								message: obj[o][0].message + ',' + that.$t('noFormAuth'),
								type: 'warning',

							});
							// console.log(that.$message)
							return;
						}
					}
				}
				validataArry.push(new Promise((resolve, reject) => {
					this.$refs['elForm'].validate((valid, object) => {
						if (!this.isWorkflowForm) formValidateNotice(object, this, this
							.formEnCodeList)
						resolve(valid)
					})
				}))
				let res = await Promise.all(validataArry)
				if (res.includes(false)) {
					return false
				} else {
					return true;
				}
			},
			changeTableData() {
				if (this.formData.part instanceof Array) this.formData.part = this.formData.part.join(',')
			},
			async submitForm() {
				this.submitLoading = true;
				let valid = await this.aysncValidateForm();
				if (valid == false) {
					this.submitLoading = false;
					return false;
				}
				this.changeTableData();
				//格式化数据
				let newObj = this.getFormData();

				//如果没有传入参数就是新增
				if (!this.keyValue) {
					request({
						url: baseUrl + "/" + this.addressUrl,
						method: "post",
						data: newObj
					
					}).then((res) => {
						if (res.data.success) {
							this.submitLoading = false;
							this.$notify({
								title: "成功",
								message: "新增成功",
								type: "success",
							});
							this.$emit("onChange", true)
						}
					});
					this.submitLoading = false;
				} else {

					request({
						url: baseUrl + "/" + this.addressUrl + "/" + this.keyValue,
						method: "put",
						data: newObj
					}).then((res) => {
						this.submitLoading = false;
						this.$notify({
							title: "成功",
							message: "修改成功",
							type: "success",
						});
						this.$emit("onChange", true)
					});

				}




				//await this.handleSubmit();
			},
			cancelForm() {
				this.$emit("onChange", true)
			},
			formatTree(data, valueField, lableField, childField, type) {
				let tree = [];
				data.forEach((node, index) => {
					let newNode = {
						value: node[valueField],
						label: node[lableField],
					};
					if (type) {
						newNode.disabled = node[valueField] == undefined ? true : false
					}
					tree.push(newNode);
					if (node[childField] != null && node[childField].length > 0) {
						newNode.children = (this.formatTree(node[childField], valueField, lableField, childField,
							type));
					}
				}, this);
				return tree;
			},

			//辅助编辑 预留方法
			async handleEdit() {
				await this.insertEditEvent();
			},

			//FORM_EVENT_EDIT

			//辅助提交 预留方法
			async handleSubmit() {
				await this.insertSubmitEvent();
			},
			//辅助工作流提交 预留方法
			getHandleSubmitFormEvent() {

			},
			//辅助工作流表单事件 判断 表单事件是否已经执行过
			getisExecutedFormEvent() {
				let key = 'index' + this.$store.state.formParser.workflowFormTabIndexKey;
				return this.$store.state.formParser.isExecutedFormEvent[key] ? this.$store.state.formParser
					.isExecutedFormEvent[key] : false;

			},

			async getField103Options() {
				// 注意：this.$axios是通过Vue.prototype.$axios = axios挂载产生的
				try {
					let resp = await this.$axios({
						method: 'get',
						url: baseUrl + '/data-items/roomType/detail',
					});
					if (resp.data.data) {
						this.room_typeOptions = resp.data.data;

					}
				} catch (error) {}
			},
			async triggerEventHandler(eventData) {
				if (eventData.length > 0) {
					eventData.forEach(ele => {
						let functionName = 'getField' + ele.componentFormId + 'Options';
						if (typeof this[functionName] == "function") {
							this[functionName]();
						}
					})
				}
			},
			triggerEventFormIdHandler(formId) {
				if (this.formFieldsMap.get(formId).__config__.triggerEvents && this.formFieldsMap.get(formId).__config__
					.triggerEvents.length > 0) {
					this.formFieldsMap.get(formId).__config__.triggerEvents.forEach(triggerEventItem => {
						if (this.formFieldsMap.get(formId).__config__.triggerEventData && this.formFieldsMap.get(
								formId)
							.__config__.triggerEventData[triggerEventItem] && this.formFieldsMap.get(formId)
							.__config__
							.triggerEventData[triggerEventItem].length > 0) {
							this.triggerEventHandler(this.formFieldsMap.get(formId).__config__.triggerEventData[
								triggerEventItem]);
						}
					});
				}
				return true;
			},
			//清空联想弹层、多选弹层的值
			clearBombLayerFormData(filed) {
				this.formData[filed] = '';
				this.formData[filed + '_showValue'] = '';
			},
			// 流程参数赋值
			processParameterAssignment() {
				// 流程中的流程参数赋值 优先级最高，最后赋值
				setTimeout(() => {
					if (this.isEdit != 2 && this.parameter && this.parameter[this.mainTableName]) {
						this.showForm = false;
						for (let [key, value] of Object.entries(this.parameter[this.mainTableName])) {
							this.setFormDataValue(key, value);
						}
						this.showForm = true;
					}
				}, 0);
			},
			setFormDataValue(field, val) {
				if (Array.isArray(this.formData[field])) {
					if (val.includes(',')) {
						this.formData[field] = val.split(',');
					} else {
						this.formData[field] = [val];
					}
				} else {
					this.formData[field] = val;
				}
				//处理联想弹层，多选弹层
				if (this.formData[field + '_showValue'] != undefined) {
					this.formData[field + '_showValue'] = val;
				}
			},
			setOutputsValue(nodeType, formId, res, outputKey) {
				let nodeTypeChecked = false;
				if (nodeType == 'created') {
					nodeTypeChecked = this.operationVal == 'add';
				} else if (nodeType == 'edit') {
					nodeTypeChecked = this.operationVal == 'edit';
				} else if (nodeType == 'mounted') {
					nodeTypeChecked = this.operationVal == 'add' || this.operationVal == 'edit';
				}
				if (nodeTypeChecked && this.disabled != true && res && res.data && res.data.data && this.formFieldsMap
					.has(formId) && this.formFieldsMap.get(formId).__vModel__ && this.formData.hasOwnProperty(this
						.formFieldsMap.get(formId).__vModel__)) {
					this.setFormDataValue(this.formFieldsMap.get(formId).__vModel__, res.data.data[outputKey]);
					// 联想弹层 多选弹层 特殊处理
					if (this.formFieldsMap.get(formId).__config__ && this.formFieldsMap.get(formId).__config__.avueType &&
						this.needShowValueTags.includes(this.formFieldsMap.get(formId).__config__.avueType)) {
						this.formData[this.formFieldsMap.get(formId).__vModel__ + '_showValue'] = res.data.data[outputKey];
					}
					this.triggerEventFormIdHandler(formId);
				}
			},
			//子表单权限
			getAuthorityTableChildrenList(bindTable, children) {
				let column = [];
				if (bindTable && this.formEnCodeList && this.formEnCodeList[bindTable]) {
					let formSubEnCodeList = this.formEnCodeList[bindTable];
					if (children && children.length > 0) {
						column = children.map(ele2 => {
							if (formSubEnCodeList.includes(ele2.prop)) {
								ele2.hide = false;
							} else {
								ele2.hide = true;
							}
							if (ele2.hide == false) {
								//工作流中系统表单必填权限
								if (this.formSubTableNotRequiredList && this.formSubTableNotRequiredList[
									bindTable] !=
									undefined) {
									if (this.formSubTableNotRequiredList[bindTable].includes(ele2.prop)) {
										ele2.required = false;
									} else {
										ele2.required = true;
									}
								}
								ele2.rules = [];
								if (ele2.required) {
									ele2.rules = ele2.ruleList;
								}
								// disabled 属性
								if (this.formSubTableDisabledList && this.formSubTableDisabledList[bindTable] !=
									undefined) {
									if (this.formSubTableDisabledList[bindTable].includes(ele2.prop)) {
										ele2.disabled = true;
									} else {
										ele2.disabled = false;
									}
								}
								if (this.disabled) { //查看
									ele2.disabled = true;
								}
							} else {
								ele2.rules = []
								if (ele2.required) {
									ele2.ruleList.forEach(el => {
										el.message += ',' + this.$t('noFormAuth')
									})
									ele2.rules = ele2.ruleList;
								}
							}
							return ele2;
						});
					}
					return column;
				} else {
					return children;
				}
			},
			async insertCreatedEvent() {

			},
			async insertMountedEvent() {

			},
			async insertEditEvent() {

			},
			async insertSubmitEvent() {

			},
			getFormConfig() {
				return fieldsConfig();
			},
			getFormFieldsMap() {
				return formFieldsMap();
			},
			async getHideComponentsMap() {
				let mapList = new Map();
				let hideComponentList = this.getHideComponents();
				if (typeof this.initHideComponentList == 'function') {
					mapList = await this.initHideComponentList(hideComponentList);
					this.$store.commit("SET_HIDE_COMPONENT_LIST", mapList);
				}
				return mapList;
			},
			getHideComponentsMapItem(key) {
				if (this.hideComponentsMap.size > 0) {
					return this.hideComponentsMap.has(key) ? this.hideComponentsMap.get(key) : "";
				} else {
					return ""
				}
			},
			getHideComponents() {
				return getHideComponents();
			},
		}
	}
</script>
<style>
	.el-table__empty-block {
		width: 100% !important;
	}

	.avue-form__row {
		padding: 0 !important;
	}

	#editorphone {
		width: 375px;
		margin: 0 auto;
		border: 1px solid #E4E7ED;
		padding: 0 7.5px;
		background: #f5f6fa;
		height: 700px;
		overflow-y: auto;
		overflow-x: hidden;
		border-radius: 5px;
	}

	#editorphone .el-col {
		border-bottom: 1px solid #F2F2F2;
		background: #fff;
		margin-bottom: 0;
		padding: 0 15px 6px !important;
		width: 100%;
	}

	#editorphone .el-form-item__label {
		line-height: 20px
	}

	#editorphone .el-input-group .el-input__inner {
		background: #f5f6fa
	}

	#editorphone .el-input__inner {
		border: 0
	}

	#editorphone .el-input-group__append,
	#editorphone .el-input-group__prepend {
		border: 0;
		background: #edeef2;
		color: #666;
	}

	#editorphone .el-input-group .el-input__prefix {
		left: 44px
	}

	#editorphone .el-input-group .el-input__suffix {
		right: 44px
	}

	#editorphone .el-form-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-flow: wrap;
	}

	#editorphone .el-form-item__label {
		float: none;
		min-width: 85px;
		width: auto !important;
		text-align: left;
		flex: auto;
	}

	#editorphone .tinymce .el-form-item__label {
		min-width: 100%;
	}

	#editorphone .el-form-item__content {
		margin-left: 0px !important;
		flex: auto;
		width: calc(100% - 95px);
	}

	#editorphone .avueFormNoLable .el-form-item__label,
	#editorphone .avueFormNoLable .avue-crud__pagination {
		display: none;
	}

	#editorphone .avueFormNoLable .el-collapse-item__wrap,
	#editorphone .avueFormNoLable .el-collapse {
		border-bottom: 0
	}

	#editorphone .avueFormNoLable .el-col {
		border-bottom: 0;
		padding-bottom: 0
	}

	#editorphone .el-form-item__content .el-button:first-child {
		margin-left: 90px;
	}
</style>
